/**
 * @author wn
 * @date 2022/05/12 14:53:37
 * @description: 图片懒加载的 自定义指令 v-lazy
 */

// 图片加载失败显示的默认图片
// import preImg from '@/assets/images/loading.gif'
import defaultImg from '@/assets/images/200.png'
import { useIntersectionObserver } from '@vueuse/core'

export default app => {
	// 1 图片懒加载指令 v-lazy
	// 原理：先不能在图片 src 上设置图片地址,当图片进入可视区 将存储的地址设置给 src 即可
	app.directive('lazy', {
		// vue2.0 监听使用指令的 DOM 是否创建好  inserted  函数
		// vue.directive('lazy',inserted () { })
		// vue3.0 监听使用指令的 DOM 是否创建好  mounted  函数
		// el 当前指令的 DOM 元素  binding.value就是指令的值
		mounted(el, { value }) {
			// stop 是一个函数，用于停止检测元素可见性
			// 2 使用该函数来观察使用当前指令的元素是否可见
			const { stop } = useIntersectionObserver(
				el,
				// isIntersecting 布尔值，元素可见为 true，元素不可见为 false
				([{ isIntersecting }], observerElement) => {
					// 如果目标可见，发送请求
					// el.style.background = `url(${preImg}) no-repeat center`
					if (isIntersecting) {
						// console.log('可以用lazy自定义指令替换src属性了')
						// 3 如果目标可见，替换图片地址，自动加载图片
						el.src = value
						// 4 如果图片失败，无法加载图片，显示占位图
						el.onerror = () => (el.src = defaultImg)
						// 5 图片加载完成 主动停止检测元素可见性
						el.onload = () => {
							// el.style.backgroud = ''
							stop()
						}
					}
				},
				// 可见性检测的范围
				{
					threshold: 0,
				}
			)
		},
	})
}
